import { BlockEnum, NodeProps } from '@/components/workflow/types'
import { useWorkFlowStore } from '@/store/workflowStore'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { ComponentDescMap } from '../../constants'
import DisplayCont from '../components/DisplayCont'
import '../style.less'

const StartNode: FC<NodeProps<any>> = ({ id, data }: any) => {
  const { flowVariables } = useWorkFlowStore()
  const [list, setList] = useState([])
  const [firstThreeItems, setFirstThreeItems] = useState([])

  useEffect(() => {
    const variables = flowVariables[data.id]?.variables ?? []
    setList(variables)
    if (variables.length > 0) {
      setFirstThreeItems(variables.slice(0, 3))
    }
  }, [data.id, flowVariables])
  return (
    <div className="workflow-common-node">
      <div className="common-node-desc">{data.desc || ComponentDescMap[BlockEnum.Start]}</div>
      {/* 输入 */}
      <div className="nodrag mapLLMNode_case cursor-default">
        <DisplayCont firstThreeItems={firstThreeItems} list={list}></DisplayCont>
      </div>
    </div>
  )
}

export default React.memo(StartNode)
